<template>
  <view class="user-center">
    <!-- 用户信息表单 -->
    <view class="form-container">
      <!-- 用户/农户表单 -->
      <template>
        <view class="form-item">
          <text class="form-label">用户名</text>
          <input
            class="form-input"
            v-model="ruleForm.userName"
            placeholder="请输入用户名"
          />
        </view>
        <!-- <view class="form-item">
          <text class="form-label">密码</text>
          <input
            class="form-input"
            type="password"
            v-model="ruleForm.password"
            placeholder="请输入密码"
          />
        </view> -->
        <view class="form-item">
          <text class="form-label">用户姓名</text>
          <input
            class="form-input"
            v-model="ruleForm.nickName"
            placeholder="请输入姓名"
          />
        </view>
        <view class="form-item" @tap="yonghutouxiangTap">
          <text class="form-label">头像</text>
          <image
            class="avatar"
            :src="_imgUrl + ruleForm.avatar || '/static/default-avatar.png'"
          />
        </view>
        <view class="form-item picker-item">
          <text class="form-label">性别</text>
          <picker
            class="form-picker"
            @change="yonghuxingbieChange"
            :range="yonghuxingbieOptions"
          >
            <view>{{ xingbie || "请选择性别" }}</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="form-label">手机号码</text>
          <input
            class="form-input"
            v-model="ruleForm.phonenumber"
            placeholder="请输入手机号"
          />
        </view>
        <!-- <view class="form-item">
			<text class="form-label">邮箱</text>
			<input class="form-input" v-model="ruleForm.youxiang" placeholder="请输入邮箱"/>
		  </view> -->
      </template>

      <!-- 农户表单 -->
      <template v-if="tableName == 'nonghu'">
        <!-- 类似上述结构 -->
      </template>
    </view>

    <!-- 操作按钮 -->
    <view class="action-buttons">
      <button class="save-btn" @tap="update">保存修改</button>
      <button class="logout-btn" @tap="logout">退出登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {},
      tableName: "",
      yonghuxingbieOptions: [],
      yonghuxingbieIndex: 0,
      nonghuxingbieOptions: [],
      nonghuxingbieIndex: 0,
      roleId: "",
      _imgUrl: "",
      xingbie: "",
    };
  },
  async onLoad() {
    let table = uni.getStorageSync("nowTable");
    // let res = await this.$api.session(table);
    this._imgUrl = this.$base.url;
    // this.ruleForm = res.data;
    this.ruleForm = uni.getStorageSync("userInfo");
    this.tableName = table;
    
    // 自定义下拉框值
    // if (this.tableName == "yonghu") {
    this.yonghuxingbieOptions = "男,女".split(",");
    this.yonghuxingbieOptions.forEach((item, index) => {
      if (item == this.ruleForm.xingbie) {
        this.yonghuxingbieIndex = index;
      }
    });
    this.xingbie = this.yonghuxingbieOptions[this.ruleForm.sex];
    // }
    // 自定义下拉框值
    if (this.tableName == "nonghu") {
      this.nonghuxingbieOptions = "男,女".split(",");
      this.nonghuxingbieOptions.forEach((item, index) => {
        if (item == this.ruleForm.xingbie) {
          this.nonghuxingbieIndex = index;
        }
      });
    }
    this.styleChange();
    this.getUserInfo();
  },
  methods: {
    // 下拉变化
    yonghuxingbieChange(e) {
      this.yonghuxingbieIndex = e.target.value;
      // this.ruleForm.xingbie =
      //   this.yonghuxingbieOptions[this.yonghuxingbieIndex];
      this.xingbie = this.yonghuxingbieOptions[this.yonghuxingbieIndex];
      this.ruleForm.sex = this.yonghuxingbieIndex;
    },
    // 下拉变化
    nonghuxingbieChange(e) {
      this.nonghuxingbieIndex = e.target.value;
      this.ruleForm.xingbie =
        this.nonghuxingbieOptions[this.nonghuxingbieIndex];
    },
    styleChange() {
      this.$nextTick(() => {
        // document.querySelectorAll('.cu-form-group .uni-input-input').forEach(el=>{
        //   el.style.backgroundColor = this.userInfoForm.list.input.backgroundColor
        // })
      });
    },
    // 获取uuid
    getUUID() {
      return new Date().getTime();
    },
    logout() {
      uni.setStorageSync("token", "");
      uni.removeStorageSync("userInfo");
      // this.$utils.jump("../login/login");
	  uni.reLaunch({
	  	url: '/pages/login/login'
	  })
    },
    // 注册
    async update() {
      // if((!this.ruleForm.yonghuming) && `yonghu` == this.tableName){
      // 	this.$utils.msg(`用户名不能为空`);
      // 	return
      // }
      // if((!this.ruleForm.mima) && `yonghu` == this.tableName){
      // 	this.$utils.msg(`密码不能为空`);
      // 	return
      // }
      // if((!this.ruleForm.nickName) && `yonghu` == this.tableName){
      // 	this.$utils.msg(`用户姓名不能为空`);
      // 	return
      // }
      // if(`yonghu` == this.tableName && this.ruleForm.shoujihaoma&&(!this.$validate.isMobile(this.ruleForm.shoujihaoma))){
      // 	this.$utils.msg(`手机号码应输入手机格式`);
      // 	return
      // }
      // if(`yonghu` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
      // 	this.$utils.msg(`邮箱应输入邮件格式`);
      // 	return
      // }
      // if((!this.ruleForm.nonghuzhanghao) && `nonghu` == this.tableName){
      // 	this.$utils.msg(`农户账号不能为空`);
      // 	return
      // }
      // if((!this.ruleForm.mima) && `nonghu` == this.tableName){
      // 	this.$utils.msg(`密码不能为空`);
      // 	return
      // }
      // if((!this.ruleForm.nonghuxingming) && `nonghu` == this.tableName){
      // 	this.$utils.msg(`农户姓名不能为空`);
      // 	return
      // }
      // if(`nonghu` == this.tableName && this.ruleForm.lianxifangshi&&(!this.$validate.isMobile(this.ruleForm.lianxifangshi))){
      // 	this.$utils.msg(`联系方式应输入手机格式`);
      // 	return
      // }
      // if(`nonghu` == this.tableName && this.ruleForm.youxiang&&(!this.$validate.isEmail(this.ruleForm.youxiang))){
      // 	this.$utils.msg(`邮箱应输入邮件格式`);
      // 	return
      // }
      let params = {
        ...this.ruleForm,
        userId: this.ruleForm.userId,
        // userName: this.ruleForm.userName,
        // postIds:[],
        roleId: this.roleId,
        roleIds: [this.roleId],
        // roleIds:[this.ruleForm.roleId],
        // password: this.ruleForm.password,
        // nickName: this.ruleForm.nickName,
        // avatar: this.ruleForm.avatar,
        // sex: this.ruleForm.sex,
        // phone: this.ruleForm.phone,
      };
      await this.$api.update("user", params);
      this.$utils.msgBack("修改成功");
    },

    yonghutouxiangTap() {
      let _this = this;
      this.$api.upload(function (res) {
        console.log("123123", res);

        _this.ruleForm.avatar = res.fileName;
        _this.$forceUpdate();
      });
    },
    nonghutouxiangTap() {
      let _this = this;
      this.$api.upload(function (res) {
        _this.ruleForm.touxiang = _this.$base.url + "upload/" + res.file;
        _this.$forceUpdate();
      });
    },
    async getUserInfo() {
      try {
        let res = await this.$api.info(
          "user",
          uni.getStorageSync("userInfo").userId
        );
        if (res.code == 200) {
          uni.setStorageSync("userInfo", res.data);
          this.roleId = res.roleIds[0];
        }
      } catch (error) {
        //TODO handle the exception
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.user-center {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  padding: 40rpx 32rpx;
}

.form-container {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 8rpx 32rpx rgba(102, 126, 234, 0.2);
}

.form-item {
  margin-bottom: 32rpx;
  .form-label {
    display: block;
    color: #667eea;
    font-size: 28rpx;
    margin-bottom: 16rpx;
  }

  .form-input {
    background: #f8f9ff;
    border: 2rpx solid #e2e8f0;
    border-radius: 48rpx;
    padding: 24rpx 32rpx;
    font-size: 28rpx;
    color: #2d3748;
    transition: all 0.3s;

    &:focus {
      border-color: #667eea;
      box-shadow: 0 0 16rpx rgba(102, 126, 234, 0.2);
    }
  }
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  box-shadow: 0 8rpx 24rpx rgba(102, 126, 234, 0.3);
}

.picker-item {
  .form-picker {
    background: #f8f9ff;
    border-radius: 48rpx;
    padding: 24rpx;
    color: #667eea;
  }
}

.action-buttons {
  margin-top: 64rpx;
  display: flex;
  //   width: 100vw;
  //   flex-direction: column;
  gap: 32rpx;

  button {
    height: 96rpx;
    border-radius: 48rpx;
    font-size: 32rpx;
    transition: all 0.2s;

    &.save-btn {
      background: linear-gradient(135deg, #667eea, #764ba2);
      color: white;
    }

    &.logout-btn {
      background: rgba(255, 255, 255, 0.9);
      color: #ff4757;
      border: 2rpx solid #ff4757;
    }

    &:active {
      transform: scale(0.98);
    }
  }
}
</style>
